Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: visually editable PDP #1808

Merged

Conversation

agurtovoy
Copy link
Contributor

@agurtovoy agurtovoy commented Dec 25, 2024

What/Why?

Make product detail page visually editable.

Testing

Kapture.2025-01-08.at.13.42.10.mp4

Copy link

linear bot commented Dec 25, 2024

Copy link

changeset-bot bot commented Dec 25, 2024

⚠️ No Changeset found

Latest commit: ebabed3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Dec 25, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
catalyst-latest ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 8, 2025 9:33pm
catalyst-soul ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 8, 2025 9:33pm
3 Skipped Deployments
Name Status Preview Comments Updated (UTC)
catalyst ⬜️ Ignored (Inspect) Jan 8, 2025 9:33pm
catalyst-au ⬜️ Ignored (Inspect) Visit Preview Jan 8, 2025 9:33pm
catalyst-uk ⬜️ Ignored (Inspect) Visit Preview Jan 8, 2025 9:33pm

@agurtovoy agurtovoy changed the base branch from main to soul/integrations/makeswift December 25, 2024 22:52
@agurtovoy agurtovoy changed the base branch from soul/integrations/makeswift to aleksey/vib-1043-component-theming December 25, 2024 22:52
@agurtovoy agurtovoy changed the title Aleksey/vib 908 pdp visual editing feat: visually editable PDP Dec 25, 2024
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 78a9973 to 61386d0 Compare December 25, 2024 23:06
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 61386d0 to 1044c5e Compare December 25, 2024 23:23
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 1044c5e to 69ddc30 Compare December 26, 2024 04:05
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 69ddc30 to 84742ae Compare December 26, 2024 16:49
@agurtovoy agurtovoy force-pushed the aleksey/vib-1043-component-theming branch 5 times, most recently from 624ef9d to 0fd8e93 Compare December 31, 2024 07:49
Base automatically changed from aleksey/vib-1043-component-theming to soul/integrations/makeswift December 31, 2024 17:10
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 84742ae to 203bfc2 Compare January 3, 2025 02:48
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 203bfc2 to b70653e Compare January 6, 2025 23:29
...props
}: {
type: string;
label: string;
label: string | Promise<string>;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow label to be a promise so we can provide a descriptive label here.

Note that waiting for the label to resolve below feels a bit off as strictly speaking label is not required for rendering the snapshot element tree and could theoretically be resolved in parallel. Might be something we want to pursue later.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be Streamable<string>?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't want to make this dependent on Vibes.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Catalyst itself depends on VIBES so this shouldn't be an issue. We're also planning on creating a react-streamable library and Catalyst will have it as it will be required to use with VIBES. Not a big deal, though

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Catalyst itself depends on VIBES so this shouldn't be an issue.

I know it does, but I view the collection of "userland" Makeswift boilerplate in this dir as a prototype for our updated integration guidelines, and I don't think they should depend on VIBES.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would we ever want to make label a promise in that userland implementation?

I think we should; it's likely that giving a "dynamic" component a meaningful label would require a fetch.

If we did, wouldn't that effectively be introducing the streamable pattern

I personally don't think the label should be "streamed" here (awaited while delaying rendering/rendering a placeholder). I think it should be resolved in parallel and assigned to the snapshot's element tree asynchronously, independently of what happens in React.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should; it's likely that giving a "dynamic" component a meaningful label would require a fetch.

Given that the snapshot is not a promise, though, and that we await label without a suspense boundary, there seems to be no benefit to taking label as a promise. I think that taking in promises like this (i.e., the streamable pattern) is only relevant when the component uses Suspense and handles the fallback appropriately. Simply making the prop a promise won't make it stream

I personally don't think the label should be "streamed" here (awaited while delaying rendering/rendering a placeholder). I think it should be resolved in parallel and assigned to the snapshot's element tree asynchronously, independently of what happens in React.

See my point above, accepting a promise here is useless since we await it immediately and don't use Suspense. The user can await it themselves before passing it to us.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@migueloller It's useless now, what I was proposing in my original comment is that, because label is not required for rendering the snapshot element tree and could theoretically be resolved in parallel, we make label an optional promise in the runtime and do resolve it in parallel.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you say "in parallel", do you mean "lazily" so that we do it at a later time and not in the path of rendering the component? For example, perhaps we resolve the promise right before we send the label via postMessage to the builder?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, exactly.

...props
}: {
type: string;
label: string;
label: string | Promise<string>;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be Streamable<string>?

core/vibes/soul/lib/streamable.tsx Show resolved Hide resolved
core/app/[locale]/(default)/product/[slug]/page.tsx Outdated Show resolved Hide resolved
@agurtovoy agurtovoy force-pushed the aleksey/vib-908-pdp-visual-editing branch from 99c7233 to 85429b5 Compare January 8, 2025 21:30
@agurtovoy agurtovoy requested a review from a team as a code owner January 8, 2025 21:30
@agurtovoy agurtovoy requested a review from migueloller January 8, 2025 21:34
@agurtovoy agurtovoy merged commit 5bc91db into soul/integrations/makeswift Jan 8, 2025
8 checks passed
@agurtovoy agurtovoy deleted the aleksey/vib-908-pdp-visual-editing branch January 8, 2025 21:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants